<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row :gutter="20">
        <el-col :span="16"
          ><div class="grid-content bg-purple">
            <div class="block">
              <el-carousel height="450px">
                <el-carousel-item>
                  <img
                   src="@/assets/imgs/sm1.png"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </el-carousel-item>
                <el-carousel-item>
                  <img
                   src="@/assets/imgs/sm2.png"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </el-carousel-item>
                <el-carousel-item>
                  <img
                   src="@/assets/imgs/sm3.png"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </el-carousel-item>
                <el-carousel-item>
                  <img
                    src="@/assets/imgs/sm4.png"
                    alt=""
                    style="width: 100%; height: 100%"
                  />
                </el-carousel-item>
              </el-carousel>
            </div>

            <el-link
              href="https://element.eleme.io"
              target="_blank"
              style="
                margin-top: 20px;
                margin-bottom: 20px;
                font-size: 22px;
                font-weight: bold;
                color: #101f56;
              "
              >友情链接</el-link
            >
            <el-row :gutter="20">
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-link
                    href="https://lib.gkd.edu.cn/channels/206.html"
                    target="_blank"
                  >
                    <img
                      src="@/assets/imgs/sm4.png"
                      alt=""
                      style="width: 100%; height: 130px"
                  /></el-link></div
              ></el-col>
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-link
                    href="https://www.gkd.edu.cn/contents/1457/113.html"
                    target="_blank"
                  >
                    <img
                      src="@/assets/imgs/sm2.png"
                      alt=""
                      style="width: 100%; height: 130px"
                  /></el-link></div
              ></el-col>
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-link
                    href="https://www.gkd.edu.cn/xybgs/"
                    target="_blank"
                  >
                    <img
                      src="@/assets/imgs/sm3.png"
                      alt=""
                      style="width: 100%; height: 130px"
                  /></el-link></div
              ></el-col>
            </el-row></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <div>
              <div id="chart" style="width: 100%; height: 215px;background-color: #101f56;"></div>

            </div>
            <div>
              <div id="chart2" style="width: 100%; height: 215px;margin-top: 20px;background-color: #101f56;"></div>
            </div>
            <div>
              <div id="chart4" style="width: 100%; height: 215px;margin-top: 20px; background-color: #101f56;"></div>
            </div></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById("chart"));
      const chart2 = echarts.init(document.getElementById("chart2"));
      const chart4 = echarts.init(document.getElementById("chart4"));

      const option = {
        textStyle:{
            color: '#ffffff',
          },
        color: ['rgb(250,200,88)', 'rgb(250,200,88)'],
        grid: {
          //占比大小
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        title: {
          text: "数据显示",
          left: "center",
          

          textStyle:{
            color: '#66DD66',
          }
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            console.log(params[0].seriesName);
            return (
              "2022年数据" +
              "<br/>" +
              params[0].seriesName +
              ":" +
              params[0].data +
              "<br>" +
              params[1].seriesName +
              ":" +
              params[1].data +
              "<br>"
            ); // + params[2].seriesName + ':' + params[2].data
          },
        },
        legend: {
          data: ["人数"],
          left: "right",
          textStyle:{
            color: '#ffffff',
          }
        },
        xAxis: {
          type: "category",
          data: ["不及格", "及格", "良好", "优秀"],
        },
        yAxis: {
          type: "value",
          min: 0,
          name: "单位/人",
          splitNumber: 5, // 设置为 5 表示显示五行刻度线
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: [1, 2, 3, 4],
            barWidth: "30", //设置柱子的width
          },
          {
            name: "占比",
            type: "bar",
            data: ["10%", "20%", "30%", "40%"],
            itemStyle: {
              color: "blue",
            },
          },
        ],
      };
      const option2 = {
        
        title: {
          left: "center",
          text: "学年成绩数据分布图",
          textStyle: {
            color: "#6d6",
          },
        },
        tooltip: {},
        legend: {
          textStyle:{
            color: '#ffffff',
          },
          left: "right",
          top: "10",
          orient: "vertical",
          data: ["一学年", "二学年", "三学年", "四学年"],
        },
        dataset: {
      
          source: [
            ["quarter", "一学年", "二学年", "三学年", "四学年"],
            ["大一", 25.74, 25.7, 29.18, 21.58],
            ["大二", 510.8, 539.2, 611, 672],
          ],
        },
        series: [
          {
            name: "大一",
            type: "pie",
            center: ["25%", "50%"], //圆心横坐标、纵坐标
            radius: "40%",
            seriesLayoutBy: "row",
            encode: {
              itemName: 0, //数据项名称，在legend中展示
              value: 1,
            },
            label: {
              show: false,
            },
          },
          {
            name: "大二",
            type: "pie",
            center: ["75%", "50%"], //圆心横坐标、纵坐标
            radius: "40%",
            seriesLayoutBy: "row",
            encode: {
              itemName: 0, //数据项名称，在legend中展示
              value: 2,
            },
            label: {
              show: false,
            },
          },
        ],
      }; // 指定图表的配置项和数据

   
      const option4 = {
        textStyle:{
            color: '#ffffff',
          },
        title: {
          text: "学生激活数据",
          subtext: "Demo 虚构数据",
          x: "center",
          textStyle:{
            color:'#66DD66'
          }

        },

        legend: {
          orient: "horizontal",
          x: "left",
          y: "top",
          data: ["猜想", "预期", "实际"],
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "10%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          name: "月份",
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          name: "人次",
          type: "value",
          min: 0, // 配置 Y 轴刻度最小值
          max: 4000, // 配置 Y 轴刻度最大值
          splitNumber: 7, // 配置 Y 轴数值间隔
        },

        series: [
          // 多组折线图数据
          {
            name: "猜想",
            data: [
              454, 226, 891, 978, 901, 581, 400, 543, 272, 955, 1294, 1581,
            ],
            type: "line",
          },

          {
            name: "预期",
            data: [
              2455, 2534, 2360, 2301, 2861, 2181, 1944, 2197, 1745, 1810, 2283,
              2298,
            ],
            type: "line",
          },

          {
            name: "实际",
            data: [
              1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 3170,
              3665,
            ],
            type: "line",
          },
        ],
        color: ["#3366CC", "#FFCC99", "#99CC33"],
      }; //柱状图

      chart.setOption(option); // 柱状图
      chart2.setOption(option2); //饼图2
      chart4.setOption(option4);//折线图
    },
  },
};


</script>


<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
